<template>
  <div>
    <el-table :data="repaymentPlan" style="width: 100%" border stripe="true">
      <el-table-column prop="term" label="当前期数" width="80" align="center" />
      <el-table-column prop="pmtDueDate" label="到期还款日" width="100" align="center" />
      <el-table-column prop="loanGraceDate" label="宽限日" width="65" align="center" />
      <el-table-column prop="loanTermPrin" label="应还本金" width="80" align="center" />
      <el-table-column prop="paidPrin" label="已还本金" width="80" align="center" />
      <el-table-column prop="duePrin" label="本金余额" width="80" align="center" />
      <el-table-column prop="loanTermInt" label="应还利息" width="80" align="center" />
      <el-table-column prop="paidInt" label="已还利息" width="80" align="center" />
      <el-table-column prop="dueInt" label="利息余额" width="80" align="center" />
      <el-table-column prop="derateInterest" label="减免利息" width="80" align="center" />
      <el-table-column prop="ctdIntAccruDue" label="当期计提利息应还金额" width="100" align="center" />
      <el-table-column prop="acrruPen" label="应还罚息" width="80" align="center" />
      <el-table-column prop="paidPen" label="已还罚息" width="80" align="center" />
      <el-table-column prop="duePen" label="罚息余额" width="80" align="center" />
      <el-table-column prop="deratePenalty" label="减免罚息" width="80" align="center" />
      <el-table-column prop="txnFeeAmt" label="应还提前还款违约金" width="80" align="center" />
      <el-table-column prop="paidTxnFee" label="已还提前还款违约金" width="80" align="center" />
      <el-table-column prop="derateTxnAmt" label="减免提前还款违约金" width="80" align="center" />
      <el-table-column prop="loanInsuranceAmt" label="应还担保费" width="100" align="center" />
      <el-table-column prop="sum" label="合计应还" width="80" align="center" />
      <el-table-column prop="currBal" label="当前余额" width="80" align="center" />
      <el-table-column prop="compensateAmt" label="代偿金额" width="80" align="center" />
      <el-table-column prop="compensateStatus" label="代偿状态" width="80" align="center">
        <template scope="scope">
          <span v-if="scope.row.compensateStatus == 'NotCompensated'">未代偿</span>
          <span v-else-if="scope.row.compensateStatus == 'CompstRecorded'">代偿申请已记录</span>
          <span v-else-if="scope.row.compensateStatus == 'Compsting'">代偿中</span>
          <span v-else-if="scope.row.compensateStatus == 'Compsted'">代偿成功</span>
          <span v-else-if="scope.row.compensateStatus == 'CompstFailed'">代偿失败</span>
          <span v-else-if="scope.row.compensateStatus == 'CompstRefundRecorded'">代偿退还申请已记录</span>
          <span v-else-if="scope.row.compensateStatus == 'CompstExpired'">代偿申请记录已失效</span>
          <span v-else>{{ scope.row.compensateStatus }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="paidOutDate" label="结清日期" width="100" align="center" />
    </el-table>
  </div>
</template>

<script>
export default {

  props: ['rowData'],


  data() {
    return {
      repaymentPlan: [],
      rowData: [],


    }
  },

  created() {
    const rowObj = this.$props.rowData // 通过父子组件props 获取传递过来的row数据
    console.log('通过父子组件props 获取传递过来的row数据 rowObj:  ')
    console.log(this.$props.rowData)

    //展示还款计划明细
    this.showRepaymentPlan(rowObj)
  },

  methods: {

    // 展示还款计划明细
    showRepaymentPlan(rowObj) {
      console.log("============展示还款明细============")
      this.repaymentPlan = rowObj

    }

  }

}

</script>